<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
    </h:head>

    <h:body>


        <ui:composition template="/template/common/commonLayout.xhtml">                

            <ui:define name="content">


                <p:layoutUnit position="center">


                    <div align="center">

                        <p:panelGrid columns="1" styleClass="mainTitleBox">
                            <h:outputText value="Detalle de Órdenes" styleClass="mainTitle"/>
                        </p:panelGrid>

                        <h:form id="form">             

                            <!--order data-->
                            <p:panel id="dataOrder"
                                     header="Datos Órden" 
                                     toggleable="true"
                                     closable="false" 
                                     toggleSpeed="500" 
                                     collapsed="false"
                                     closeSpeed="500"
                                     style="margin-bottom:20px">

                                <p:panelGrid columns="2" style="max-width: 950px">

                                    <p:column>                                    
                                    <h:outputText value="Número de Órden"/>
                                    </p:column>
                                    
                                    <p:column>
                                    <h:outputText value="#{OrdersBean.selected.ordid}" />                                    
                                    </p:column>

                                    <p:column>
                                    <h:outputText  value="Fecha de Órden"/>
                                    </p:column>
                                    
                                    <p:column>
                                    <h:outputText value="#{OrdersBean.selected.orderdate}"/>
                                    
                                    </p:column>

                                    <p:column>
                                    <h:outputText  value="Estado"/>
                                    </p:column>
                                    <p:column>
                                        
                                    
                                    <h:outputText value="#{OrdersBean.selected.status}"/>
                                    </p:column>

                                    <p:column>
                                        
                                    
                                    <h:outputText value="Nombre Cliente"/>
                                    </p:column>
                                    
                                    <p:column>
                                        
                                    
                                    <h:outputText value="#{OrdersBean.selected.customerCusid.fname}"/>
                                    </p:column>
                                    
                                    <p:column>
                                        
                                    
                                    <h:outputText  value="Precio"/>
                                    </p:column>
                                    
                                    <p:column>
                                        <h:outputText value="#{OrdersBean.selected.price}"/>
                                        
                                    </p:column>
                                        
                                    

                                    <p:column>
                                        <h:outputText  value="Medio de Pago"/>
                                    </p:column>
                                    
                                    <p:column>
                                        <h:outputText value="#{OrdersBean.selected.customerCusid.creditcardtype}"/>
                                    </p:column>
                                    

                                    <p:column>
                                        <h:outputText  value="Contacto de Ciente"/>
                                    </p:column>
                                    
                                    <p:column>
                                        <h:outputText value="#{OrdersBean.selected.customerCusid.phonenumber}"/>
                                    </p:column>
                                    
                                    <p:column>              
                                    <h:outputText  value="Email Cliente"/>
                                    </p:column>
                                    
                                    <p:column>
                                        <h:outputText value="#{OrdersBean.selected.customerCusid.email}"/>
                                    </p:column>
                                    
                                    <p:column>
                                        <h:outputText  value="Observaciones"/>
                                    </p:column>
                                    
                                    <p:column width="100px">
                                        <h:outputText value="#{OrdersBean.selected.comments}"/>
                                    </p:column>

                                </p:panelGrid>     
                                    
                                    

                            </p:panel>

                            <!--Items by Order-->
                            <p:panel id="itemsOrder"
                                     header="Productos de la Órden" 
                                     toggleable="true"
                                     collapsed="true"
                                     closable="false" 
                                     toggleSpeed="500" 
                                     closeSpeed="500"
                                     style="margin-bottom:20px">

                                <p:dataTable rows="6"                                         
                                             paginator="true"                                             
                                             var="item"
                                             value="#{OrdersBean.selected.itemsList}"
                                             style="width: 950px; height: auto; padding-top: 15px; padding-bottom: 15px; word-wrap: break-word;"
                                             styleClass="myTable">                                

                                    <p:column headerText="Item.id">
                                        <h:outputText value="#{item.itemid}"/>
                                    </p:column>                                
                                    
                                    <p:column headerText="Item.producid">
                                        <h:outputText value="#{item.prodid}"/>
                                    </p:column>                                

                                    <p:column headerText="Núemero de Parte">
                                        <h:outputText value="#{item.partnum}"/>
                                    </p:column>                                
                                    
                                    <p:column headerText="Precio">
                                        <h:outputText value="#{item.price}"/>
                                    </p:column>
                                    
                                    <p:column headerText="Nombre">
                                        <h:outputText value="#{item.productname}"/>
                                    </p:column>                                
                                    
                                    <p:column headerText="Cantidad">
                                        <h:outputText value="#{item.quantity}"/>
                                    </p:column>

                                </p:dataTable>

                            </p:panel>

                            <p:commandButton  action="#{OrdersBean.back}"
                                              icon="ui-icon-search"                                                 
                                              value="Regresar"/>

                        </h:form>

                    </div>

                </p:layoutUnit>

            </ui:define>

        </ui:composition>

    </h:body>
</html>